<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="js/swiper.min.js" charset="UTF-8"></script>
    <script src="js/global.js" charset="UTF-8"></script>
    <script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
    <style>
        /* 在你的样式表中添加以下样式 */

        .rich-text img {
            max-width: 100%; /* 图片的最大宽度为父元素的100% */
            height: auto; /* 保持图片的纵横比例 */
        }

        .rich-text {
            max-width: 1200px; /* 设置div的最大宽度为1200px */
            margin: 0 auto; /* 居中显示内容 */
            overflow-x: auto; /* 添加水平滚动条，以防内容溢出 */
        }

    </style>
    <title>农资商贸销售系统</title>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{mall/common :: header}"></div>

<!-- 搜索栏 -->
<div th:replace="~{mall/common :: topSearch}"></div>


<!-- 内页导航栏 -->
<div class="top-nav bg3">
    <div class="nav-box inner">
    </div>
</div>
<div class="content inner">
    <section class="item-show__div item-show__head clearfix">
        <ol class="breadcrumb">
            <li><a href="index">首页</a></li>
            <li><a th:href="@{'typeDetail?id=' + ${type.id}}" th:text="${type.name}"></a></li>
            <li class="active" th:text="${goods.title}"></li>
        </ol>
        <div class="item-pic__box" id="magnifier">
            <div class="small-box">
                <img class="cover" th:src="${goods.img}" th:alt="${goods.title}">
                <span class="hover"></span>
            </div>
            <div class="thumbnail-box">
                <a href="javascript:;" class="btn btn-default btn-prev"></a>
                <div class="thumb-list">
                    <ul class="wrapper clearfix">
                        <li class="item active" th:data-src="${goods.img}"><img class="cover" th:src="${goods.img}"
                                                                                th:alt="${goods.title}"></li>
                        <li class="item" th:each="goodsImg,status : ${goodsimgList}" th:data-src="${goodsImg.img}"><img
                                class="cover" th:src="${goodsImg.img}" th:alt="${goodsImg.sketch}"></li>
                    </ul>
                </div>
                <a href="javascript:;" class="btn btn-default btn-next"></a>
            </div>
            <div class="big-box"><img th:src="${goods.img}" th:alt="${goods.title}"></div>
        </div>
        <script src="js/jquery.magnifier.js"></script>
        <script>
            $(function () {
                $('#magnifier').magnifier();
            });
        </script>
        <div class="item-info__box">
            <div class="item-title">
                <div style="display: none;" id="goodsid" class="name ep2" th:text="${goods.id}"></div>
                <div class="name ep2" id="title" th:text="${goods.title}"></div>
                <div class="sale cr" th:text="${'发布时间：'+goods.time}"></div>
            </div>
            <div class="item-price bgf5">
                <div class="price-box clearfix">
                    <div class="price-panel pull-left">
                        售价：<span class="price" th:text="${'￥'+goods.price}"></span>
                        <span class="price" style="display: none;" id="price" th:text="${goods.price}"></span>
                    </div>
                </div>
            </div>
            <div class="item-price bgf5">
                <div class="price-box clearfix">
                    <div class="price-panel pull-left">
                        描述：<span class="price" th:text="${goods.describe}"></span>
                    </div>
                </div>
            </div>
            <ul class="item-ind-panel clearfix">
                <li class="item-ind-item">
                    <span class="ind-label c9">累计销量</span>
                    <span class="ind-count cr" th:text="${salesVolume}"></span>
                </li>
                <li class="item-ind-item">
                    <a href=""><span class="ind-label c9">累计评论</span>
                        <span class="ind-count cr" th:text="${evaluationListSize}"></span></a>
                </li>
            </ul>
            <div class="item-key">

                <div class="item-amount clearfix bgf5">
                    <div class="item-metatit">数量：</div>
                    <div class="amount-box">
                        <div class="amount-widget">
                            <input class="amount-input" id="num" value="1" th:max="${goods.stock}" th:maxlength="2" title="请输入购买量"
                                   type="number">
                            <div class="amount-btn">
                                <a class="amount-but add"></a>
                                <a class="amount-but sub"></a>
                            </div>
                        </div>
                        <div class="item-stock"><span style="margin-left: 10px;">库存 <b id="Stock"
                                                                                         th:text="${goods.stock}"></b> 件</span>
                        </div>
                        <script>
                            $(function () {
                                $('.amount-input').onlyReg({reg: /[^0-9]/g});
                                var stock = parseInt($('#Stock').html());
                                $('.amount-widget').on('click', '.amount-but', function () {
                                    var num = parseInt($('.amount-input').val());
                                    if (!num) num = 0;
                                    if ($(this).hasClass('add')) {
                                        if (num > stock - 1) {
                                            return DJMask.open({
                                                width: "300px",
                                                height: "100px",
                                                content: "您输入的数量超过库存上限"
                                            });
                                        }
                                        $('.amount-input').val(num + 1);
                                    } else if ($(this).hasClass('sub')) {
                                        if (num == 1) {
                                            return DJMask.open({
                                                width: "300px",
                                                height: "100px",
                                                content: "您输入的数量有误"
                                            });
                                        }
                                        $('.amount-input').val(num - 1);
                                    }
                                });
                            });
                        </script>
                    </div>
                </div>
                <div class="item-action clearfix bgf5">
                    <a href="javascript:;" rel="nofollow" data-addfastbuy="true"
                       title="点击此按钮，到下一步确认购买信息。" id="addFastBuy" role="button" class="item-action__buy">立即购买</a>
                    <a href="javascript:;" rel="nofollow" data-addfastbuy="true" role="button" id="joinCart"
                       class="item-action__basket">
                        <i class="iconfont icon-shopcart"></i> 加入购物车
                    </a>
                    <script>
                        $(function () {
                            $('#joinCart').click(function () {
                                let num = parseInt($('.amount-input').val());
                                let stock = parseInt($('#Stock').html());
                                //判断num不能为0
                                if (!num) {
                                    return DJMask.open({
                                        width: "300px",
                                        height: "100px",
                                        content: "请输入购买数量"
                                    });
                                }
                                //不能大于库存
                                if (num > stock) {
                                    return DJMask.open({
                                        width: "300px",
                                        height: "100px",
                                        content: "您输入的数量超过库存上限"
                                    });
                                }
                                let goodsid=$('#goodsid').text();
                                let price=$('#price').text();
                                //发起请求加入购物车,不用判断参数
                                    $.ajax({
                                        url: '/mall/cart/add',
                                        type: 'post',
                                        data: {
                                            goodsid:goodsid,
                                            num:num,
                                            price:price,
                                        },
                                        success: function (res) {
                                            if (res.code === 200) {
                                                DJMask.open({
                                                    width: "300px",
                                                    height: "100px",
                                                    content: "加入购物车成功"
                                                })
                                            }else{
                                                if (res.code === 401){
                                                    DJMask.open({
                                                        width: "300px",
                                                        height: "100px",
                                                        content: res.msg+"，将在三秒后自动跳转到登录页面"
                                                    })
                                                    //倒计时三秒跳转到登录页面
                                                    setTimeout(function () {
                                                        window.location.href="/mall/login";
                                                    }, 3000);
                                                }else{
                                                    DJMask.open({
                                                        width: "300px",
                                                        height: "100px",
                                                        content: res.msg
                                                    })
                                                }
                                            }
                                        },
                                        error: function () {
                                            DJMask.open({
                                                width: "300px",
                                                height: "100px",
                                                content: "网络繁忙请稍后再试！！！"
                                            })
                                        }
                                    })

                            })

                            //立即购买
                            $('#addFastBuy').click(function () {
                                let num = parseInt($('.amount-input').val());
                                let stock = parseInt($('#Stock').html());
                                //判断num不能为0
                                if (!num) {
                                    return DJMask.open({
                                        width: "300px",
                                        height: "100px",
                                        content: "请输入购买数量"
                                    });
                                }
                                //不能大于库存
                                if (num > stock) {
                                    return DJMask.open({
                                        width: "300px",
                                        height: "100px",
                                        content: "您输入的数量超过库存上限"
                                    });
                                }

                                let goodsid=$('#goodsid').text();
                                let price=$('#price').text();
                                let data = [];
                                data.push({
                                    goodsId:goodsid,
                                    title:$('#title').text(),
                                    num:num,
                                    price:price,
                                    total:price*num
                                })
                                $.ajax({
                                    url: 'order/submitOrder',
                                    type: 'post',
                                    data: JSON.stringify(data),
                                    contentType: "application/json",
                                    success: function (res) {
                                        if (res.code === 200) {
                                            window.location.href = '/mall/userCartPay?id='+res.data
                                        }else  if (res.code === 401){
                                            DJMask.open({
                                                width: "300px",
                                                height: "100px",
                                                content: res.msg+"，将在三秒后自动跳转到登录页面"
                                            })
                                            //倒计时三秒跳转到登录页面
                                            setTimeout(function () {
                                                window.location.href="/mall/login";
                                            }, 3000);
                                        }else{
                                            DJMask.open({
                                                width: "300px",
                                                height: "100px",
                                                content: res.msg
                                            })
                                        }
                                    },
                                    error: function () {
                                        DJMask.open({
                                            width: "300px",
                                            height: "100px",
                                            content: "网络繁忙请稍后再试！！！"
                                        })
                                    }
                                })
                            })
                        })
                    </script>
                </div>
            </div>
        </div>
    </section>
    <section class="item-show__div item-show__body posr clearfix" style="margin-top: 100px;">
        <div class="item-nav-tabs">
            <ul class="nav-tabs nav-pills clearfix" role="tablist" id="item-tabs">
                <li role="presentation" class="active"><a href="#detail" role="tab" data-toggle="tab"
                                                          aria-controls="detail" aria-expanded="true">商品详情</a></li>
                <li role="presentation"><a href="#evaluate" role="tab" data-toggle="tab" aria-controls="evaluate">累计评价
                    <span class="badge" th:text="${evaluationListSize}"></span></a></li>
            </ul>
        </div>
        <div class="content">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="detail" aria-labelledby="detail-tab">
                    <div class="rich-text" th:utext="${goods.detailhtml}"></div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="evaluate" aria-labelledby="evaluate-tab">
                    <div class="evaluate-content">
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade in active" id="all" aria-labelledby="all-tab">

                                <div class="eval-box" th:each="evaluation : ${evaluationList}">
                                    <div class="eval-author">
                                        <div class="name" th:text="${evaluation.state==2 ? '用户匿名评价' : evaluation.username}"></div>
                                    </div>
                                    <div class="eval-content">
                                        <div class="eval-text" th:text="${'评价内容：'+evaluation.content}"></div>
                                        <div class="eval-time" th:text="${'评价时间：'+evaluation.time + '   评价分数：' + evaluation.score}">
                                        </div>
                                        <div class="eval-box" th:if="${evaluation.hftime!=null}">
                                            <div class="eval-content">
                                                <div class="eval-text" th:text="${'商家回复内容：'+evaluation.hfcontent}"></div>
                                                <div class="eval-time" th:text="${'商家回复时间：'+evaluation.hftime}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script src="js/jquery.zoom.js"></script>
                    </div>
                </div>
            </div>
            <div class="content inner" style="margin-bottom: 40px;">
                <section class="scroll-floor floor-2">
                    <div class="floor-title" style="display: flex;align-items: center;justify-content: center;">
                        <span th:text="${'同类'+type.name+'推荐'}"></span>
                    </div>
                    <div class="con-box">
                        <a th:each="goods : ${goodsList}" th:href="@{'goodsDetail?id=' + ${goods.id}}"
                           class="floor-item">
                            <div class="item-img hot-img">
                                <img th:src="${goods.img}" th:alt="${goods.title}" class="cover">
                            </div>
                            <div class="price clearfix">
                                <span class="pull-left cr fz16" th:text="${'￥'+goods.price}"></span>
                                <span class="pull-right c6" th:text="${goods.title}"></span>
                            </div>
                            <div class="name ep" th:title="${goods.describe}" th:text="${goods.describe}"></div>
                        </a>
                    </div>
                </section>
            </div>
        </div>
    </section>
</div>

<!-- 右侧菜单 -->
<div th:replace="~{mall/common :: rightNav}"></div>
<!-- 底部信息 -->
<div th:replace="~{mall/common :: footer}"></div>
</body>
</html>